<template>
    <div class="person">
        <h1>情况二：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
    </div>
</template>

<script setup name="Person">
    import {reactive, watch} from 'vue'
    // 数据
    let person = reactive({
        name: '张三',
        age: 18
    })

    // 方法
    function changeName() {
        person.name += '~'
    }

    function changeAge() {
        person.age += 1
    }

    function changePerson() {
        //reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
        //person = {name: 'lisi', age: 23}
        //person = reactive({name: 'lisi', age: 23})
        Object.assign(person, {name: '李四', age: 80})
    }

    // 监视，情况二：监视【reactive】定义的【对象类型】数据
    watch(person, (newValue, oldValue) => {
        console.log('person变化了', newValue, oldValue)
    })

    // vue在watch监听时：在变异 (不是替换) 对象或数组时，旧值将与新值相同，
    // 因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
    /*let newPerson = computed(() => {
        return JSON.stringify(person);
    });
    watch(newPerson, (newValue, oldValue) => {
        console.log('person变化了', newValue, oldValue)
    })*/
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }
</style>